<template>
  <!--备用-->
  <a-layout id="components-layout-demo-top-side-2" style="height: 100%;">
    <a-layout-header class="sflheader">
      <!-- <img src="../assets/logo.png" alt="" style="float: left;height: inherit;"> -->
      <p style="display: inline-block;margin: 0 1px;font-size: 22px;">考勤异常数据分析</p>

      <div style="float:right;">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <a-avatar style="backgroundColor:#1DA57A" icon="user" />
            <span style="color: #333333;margin-left: 6px;font-size: 14px;">{{user.userNO}}</span>
          </a>
          <a-menu slot="overlay" style="top: 10px;">
            <a-menu-item>
              <a href="javascript:;" @click="quitLogin">退出登录</a>
            </a-menu-item>

          </a-menu>
        </a-dropdown>
      </div>

    </a-layout-header>
    <a-layout>
      <!-- <a-layout-sider width="240" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :style="{ height: '100%', borderRight: 0,overflowY: 'auto',
    overflowX: 'hidden',backgroundColor: '#e6e6e6' }"
          :open-keys.sync="openKeys"
          @openChange="onOpenChange"
          @click="clickMenu"
          :defaultSelectedKeys="[$route.name]"
          :selectedKeys="[$route.name]"

        >
          :default-open-keys="openKeys"    添加这一句，只打开一个大类菜单，切换关闭其他菜单
          <a-menu-item key="abnormalReports">
            <router-link to="abnormalReports" replace>异常报表</router-link>]
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="cluster" />授权管理</span>
            <a-menu-item key="accessByUser">
              <router-link to="accessByUser" replace>按人授权</router-link>]
            </a-menu-item>
            <a-menu-item key="accessByDoor">
              <router-link to="accessByDoor" replace>按门授权</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="table" />报表查询</span>
            <a-menu-item key="queryByDoor">
              <router-link to="queryByDoor" replace>按门查询进出记录</router-link>
            </a-menu-item>
            <a-menu-item key="queryByPeople">
              <router-link to="queryByPeople" replace>按人查询进出记录</router-link>
            </a-menu-item>
            <a-menu-item key="queryByDevice">
              <router-link to="queryByDevice" replace>按设备查询进出记录</router-link>
            </a-menu-item>
            <a-menu-item key="queryByEquiStatus">
              <router-link to="queryByEquiStatus" replace>设备状态记录查询</router-link>
            </a-menu-item>
            <a-menu-item key="queryByOutsider">
              <router-link to="queryByOutsider" replace>外来人员进出记录</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="picture" />人脸管理</span>
            <a-menu-item key="lightFaceManage">
              <router-link to="lightFaceManage" replace>可见光人脸管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="stock" />基础数据</span>
            <a-menu-item key="timeRule">
              <router-link to="timeRule" replace>时段规则</router-link>
            </a-menu-item>
            <a-menu-item key="doorDefinition">
              <router-link to="doorDefinition" replace>门定义</router-link>
            </a-menu-item>
            <a-menu-item key="channelDefinition">
              <router-link to="channelDefinition" replace>通道定义</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub5">
            <span slot="title"><a-icon type="book" />人事档案</span>
            <a-menu-item key="deptDefinition">
              <router-link to="deptDefinition" replace>部门定义</router-link>
            </a-menu-item>
            <a-menu-item key="peopleFile">
              <router-link to="peopleFile" replace>人员档案</router-link>
            </a-menu-item>
            <a-menu-item key="resignManage">
              <router-link to="resignManage" replace>离职管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub6">
            <span slot="title"><a-icon type="control" />设备管理</span>
            <a-menu-item key="placesDefinition">
              <router-link to="placesDefinition" replace>场所定义</router-link>
            </a-menu-item>
            <a-menu-item key="devicesDefinition">
              <router-link to="devicesDefinition" replace>设备定义</router-link>
            </a-menu-item>
          </a-sub-menu>


        </a-menu>
      </a-layout-sider> -->

      <!--右侧-->
      <a-layout style="padding: 10px">
        <!--面包屑导航-->
        <!-- <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb> -->
        <a-layout-content :style="{ background: '#fff', padding: '0px', margin: 0, minHeight: '280px' }">

          <router-view/>

        </a-layout-content>
      </a-layout>
    </a-layout>

  </a-layout>
</template>

<script>
  import { tableBoxHeight } from "@/api/communal";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import { ConfigProvider } from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';

  export default {
    components: {
      ConfigProvider
    },
    name:'',
    data() {
      return {
        localezh_CN,
        rootSubmenuKeys: ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6'],
        openKeys: ['homeSummary'],
        user:{
          userNO:"--"
        }

      }
    },
    beforeMount(){
      let _this = this;
      // console.log(this.$store.state.user);
      if (this.$store.state.user.userNO) {
        this.user = this.$store.state.user;
      } else {
        this.$warning({
          title: '登录信息已失效，请重新登录！',
          okText:"去登录",
          maskClosable: false,
          keyboard: false,
          onOk() {
            return new Promise((resolve, reject) => {
              _this.$router.replace("/");
              this.$nextTick(()=>{
                this.$destroyAll();
              })
            }).catch(() => {});
          },
          onCancel() {},
        });
      }

      // 刷新页面时左侧菜单不能展开之前选中的menu
      let lastname = sessionStorage.getItem("openKeys");
      // console.log(lastname);
      // console.log(lastname.split(","));
      if (lastname != null && lastname != undefined ){
        this.openKeys = lastname.split(",");
      }

    },
    mounted() {
      // console.log(this.$route);
    },
    destroyed(){
      // 在页面销毁后
    },
    methods: {
      onOpenChange(openKeys) {
        // console.log(openKeys);
        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.openKeys = [openKeys];
        } else {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        }
        // console.log(this.openKeys);

      },

      clickMenu(item){
        // console.log(item);
        sessionStorage.setItem("openKeys", item.keyPath[1]);
      },
      quitLogin(){
        // 退出清空登陆人信息
        sessionStorage.setItem("user", JSON.stringify({}));
        sessionStorage.setItem("openKeys", null);
        this.$store.state.user = {};

        this.$router.replace("/");
      },

    },

  }
</script>

<style scoped>
  .sflheader{
    text-align: left;
    background: #0089ed url("../assets/sflheader.jpg") no-repeat center center;
  }

</style>

